<template>
  <div id="selectionlist">
    <el-dialog
      title="批示意见/办理提示"
      :visible.sync="dialogVisible"
      width="60%">
      <notice :noticePersonId="noticePersonId" :step="selStep"></notice>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="todoTitle" :visible.sync="todoDetailVisible" width="1100px" top="20px" @closed="changedept" :close-on-click-modal="false" :close-on-press-escape="false">
      <edit :substep="tabitem" :personid='editpersonid' @closedialog="todoDetailVisible = false"></edit>
    </el-dialog>
    <el-dialog title="线索举报信息" :visible.sync="clueReportListVisible" width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <clueReportList :idcardNo='idcardNo' :timestamp="timestamp"></clueReportList>
    </el-dialog>
    <el-dialog title="干部处理信息" :visible.sync="cadreHandlingListVisible" width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <cadreHandlingList :idcardNo='idcardNo' :timestamp="timestamp"></cadreHandlingList>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item>凡提四必</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px);">
          <div style="margin:15px">
            <div>
              <el-radio-group v-model="tabitem" @change="changedept" style="margin:0 0 15px" class="pointRadio">
                <el-radio-button :label="1" v-if="necessaryItems.indexOf(1)>-1">
                  <el-badge v-if="num[0][0]>0" :value="num[0][0]" class="item">查核干部档案</el-badge>
                  <span v-else>查核干部档案</span>
                </el-radio-button>
                <el-radio-button :label="2" v-if="necessaryItems.indexOf(2)>-1">
                  <el-badge v-if="num[1][0]>0" :value="num[1][0]" class="item">查核有关事项</el-badge>
                  <span v-else>查核有关事项</span>
                </el-radio-button>
                <el-radio-button :label="3" v-if="necessaryItems.indexOf(3)>-1">
                  <el-badge v-if="num[2][0]>0" :value="num[2][0]" class="item">征求纪检监察部门意见</el-badge>
                  <span v-else>征求纪检监察部门意见</span>
                </el-radio-button>
                <el-radio-button :label="4" v-if="necessaryItems.indexOf(4)>-1">
                  <el-badge v-if="num[3][0]>0" :value="num[3][0]" class="item">线索举报调查</el-badge>
                  <span v-else>线索举报调查</span>
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class="necessary">
              <el-radio-group v-model="tabdept" @change="changedept" style="margin:0 0 15px;" class="pointRadio">
                <el-radio-button :label="1">
                  <el-badge v-if="num[tabitem-1][1]>0" :value="num[tabitem-1][1]" class="item">干部一处事项</el-badge>
                  <span v-else>干部一处事项</span>
                </el-radio-button>
                <el-radio-button :label="2">
                  <el-badge v-if="num[tabitem-1][2]>0" :value="num[tabitem-1][2]" class="item">干部二处事项</el-badge>
                  <span v-else>干部二处事项</span>
                </el-radio-button>
                <el-radio-button :label="3">
                  <el-badge v-if="num[tabitem-1][3]>0" :value="num[tabitem-1][3]" class="item">干部三处事项</el-badge>
                  <span v-else>干部三处事项</span>
                </el-radio-button>
              </el-radio-group>
            </div>
            <el-table :data="personlist" highlight-current-row v-loading="listLoading" style="width: 100%; margin-bottom:15px" border
                @selection-change="handleSelectionChange">
              <el-table-column v-if="tabitem === 3"
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column type="index" label="序号" width="80">
              </el-table-column>
              <el-table-column prop="realName" label="姓名">
              </el-table-column>
              <el-table-column
                label="办理提示、批示意见"
                width="170">
                <template slot-scope="scope">
                  <el-popover placement="bottom" width="600" trigger="hover">
                    <notice :noticePersonId="scope.row.id" :step="selStep"></notice>
                    <el-button size="small" slot="reference" type="primary" @click="showNotice(scope.row.id)">查看详情</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="500">
                <template slot-scope="scope">
                  <el-button size="small" slot="reference" type="primary" @click="showClueReport(scope.row.idcardNo)" v-show="tabitem === 4">查看线索举报情况</el-button>
                  <el-button size="small" slot="reference" type="primary" @click="showCadreHandling(scope.row.idcardNo)" v-show="tabitem === 4">查看干部处理情况</el-button>
                  <el-button size="small" @click="showTodoDetail(scope.row.id)" type="success">办理</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-show="tabitem === 3">
              <el-button type="primary" @click="export1">征求机关纪委意见函</el-button>
              <el-button type="primary" @click="export2">征求驻部纪检组意见函</el-button>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import edit from './common/edit'
import notice from '../common/Notice'
import clueReportList from '../../clueReport/personList'
import cadreHandlingList from '../../cadreHandling/personList'
export default {
  components: {
    edit, notice, clueReportList, cadreHandlingList
  },
  data () {
    return {
      timestamp: '',
      idcardNo: '',
      clueReportListVisible: false,
      cadreHandlingListVisible: false,
      selStep: 21,
      num: [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]],
      todoTitle: '查核干部档案',
      tabitem: 1,
      tabdept: 1,
      todoDetailVisible: false,
      personlist: [],
      listLoading: false,
      editpersonid: '',
      tableHeight: 100,
      necessaryItems: [],
      selectlist: [],
      noticePersonId: '',
      dialogVisible: false
    }
  },
  methods: {
    showClueReport (idcardNo) {
      this.idcardNo = idcardNo
      this.clueReportListVisible = true
      this.timestamp = new Date().getTime()
    },
    showCadreHandling (idcardNo) {
      this.idcardNo = idcardNo
      this.cadreHandlingListVisible = true
      this.timestamp = new Date().getTime()
    },
    showNotice (id) { // 已批示 批示意见
      console.log('show notice id:', id)
      this.noticePersonId = id
      this.dialogVisible = true
    },
    handleSelectionChange (val) { // 待公示 table select change
      console.log('tabledata select val:', val)
      this.selectlist = [...val]
    },
    export1 () {
      let arr = [] // 人选Id
      for (let i of this.selectlist) {
        arr.push(i.id)
      }
      let para = {
        personIds: arr
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/document/exportInspectionOpinionDoc`, para)
        .then(response => {
          if (response.data.success) {
            this.download(response.data.result)
          } else {
            this.$message({
              message: '生成失败:请先选择人选',
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '生成失败:' + error,
            type: 'error'
          })
        })
    },
    export2 () {
      let arr = [] // 人选Id
      for (let i of this.selectlist) {
        arr.push(i.id)
      }
      let para = {
        personIds: arr
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/document/exportSupervisionOpinionDoc`, para)
        .then(response => {
          if (response.data.success) {
            this.download(response.data.result)
          } else {
            this.$message({
              message: '生成失败:请先选择人选',
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '生成失败:' + error,
            type: 'error'
          })
        })
    },
    download (fileid) {
      var downloadElement = document.createElement('a')
      downloadElement.href = this.$http.defaults.baseURL + this.$http.defaults.selectionAPI + 'api/gen/file/download?id=' + fileid
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
    },
    getdept () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getDepartments`)
        .then(response => {
          console.log('response.data.result')
          console.log(response.data.result)
          if (response.data.success && response.data.result) {
            if (response.data.result.necessaryItems) {
              console.log(response.data.result.necessaryItems)
              this.necessaryItems = response.data.result.necessaryItems
              // this.tabitem = response.data.result.necessaryItems[0]
              this.changedept()
            }
          }
        })
        .catch(error => {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    getNums () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/statnum/necessary/getStatNum3`)
        .then(response => {
          if (response.data.success) {
            this.num = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    changedept () {
      this.listLoading = true
      this.getNums()
      this.todoDetailVisible = false
      let para = {
        stepId: this.tabitem,
        departmentCode: this.tabdept
      }
      if (this.tabitem === 1) {
        this.selStep = 21
        this.todoTitle = '查核干部档案'
      }
      if (this.tabitem === 2) {
        this.selStep = 22
        this.todoTitle = '查核有关事项'
      }
      if (this.tabitem === 3) {
        this.selStep = 23
        this.todoTitle = '征求纪检监察部门意见'
      }
      if (this.tabitem === 4) {
        this.selStep = 24
        this.todoTitle = '线索举报调查'
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/necessary/getNotProcessedPersons`, para)
        .then(response => {
          this.listLoading = false
          if (response.data.success) {
            this.personlist = response.data.result
            this.changeSizeFlag = false
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
    },
    showTodoDetail (id) {
      console.log('personid:' + id)
      this.editpersonid = id
      this.todoDetailVisible = true
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    }
  },
  mounted () {
    this.tabitem = parseInt(this.$route.params.id)
    console.log('this.tabitem:' + this.tabitem)
    this.getdept()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
  #selectionlist .wboxnoborder .el-table{
    border: #95B8E7 solid 1px;
  }
  #selectionlist .wboxnoborder .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  #selectionlist .wboxnoborder .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    text-align: center;
  }
  #selectionlist .el-table__row{
    height: 50px;
  }
</style>
<style scoped>
  #selectionlist .cell i {
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: center;
    display: block;
    cursor: pointer;
    margin: 0 auto;
  }
  .workflowmsg ul{
    background:#F5F7FA;
    margin:0 20px 20px;
    padding:10px 0;
  }
  .workflowmsg li{
    padding:0;
    list-style: none;
    margin-left:20px;
    line-height: 200%;
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  h3{
    font-size:var(--size16) !important;
    font-weight: bolder;
    padding-left: 20px;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  #selectionlist .wboxnoborder{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    margin:0 10px;
    overflow: hidden;
  }
</style>
